---
title: Lens
date: 2025-01-13
description: A interactive component that enables zooming into images, videos and other elements.
author: h3rmel
published: true
---

<ComponentPreview name="lens-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @magicui/lens
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="lens" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Examples

### Static Lens

<ComponentPreview name="lens-demo-2" />

### Lens with a Default Position

<ComponentPreview name="lens-demo-3" />

## Usage

```tsx showLineNumbers
import { Lens } from "@/components/ui/lens"
```

```tsx showLineNumbers
<Lens>
  <img src="/images/lens-demo.jpg" alt="Lens Demo" />
</Lens>
```

## Props

| Property          | Type              | Default | Description                                                |
| ----------------- | ----------------- | ------- | ---------------------------------------------------------- |
| `children`        | `React.ReactNode` | -       | The content that will be magnified by the lens             |
| `zoomFactor`      | `number`          | 1.3     | The magnification factor of the lens                       |
| `lensSize`        | `number`          | 170     | The size of the lens in pixels (works as a diameter)       |
| `position`        | `Position`        | -       | The current position of the lens                           |
| `defaultPosition` | `Position`        | -       | The initial position of the lens                           |
| `isStatic`        | `boolean`         | false   | Determines if the lens will remain in a fixed position     |
| `duration`        | `number`          | 0.1     | Duration of the animation when the lens moves (in seconds) |
| `lensColor`       | `string`          | -       | The color of the lens (CSS color value)                    |
| `ariaLabel`       | `string`          | -       | Accessibility label for the lens component                 |
